<template>
    <div class="bg-[#eee] h-16 flex justify-between items-center border-b border-gray-200 px-6" style="padding: 10px;">
        <span class="bg-green-600 whitespace-nowrap text-white text-base  rounded w-20 text-center " style="padding: 5px;"> 总积分:0 </span>
    </div>
    <!-- 数据列表 -->
    <el-table ref="multipleTableRef" @selection-change="handleSelectionChange" :data="integralList"
        header-row-class-name="orange-header" border >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="integral" label="积分" />
        <el-table-column prop="date" label="日期" />
        <el-table-column prop="systemNote" label="系统备注" />
        <el-table-column prop="serviceNote" label="客服备注" />
    </el-table>
    <div class="mt-8 flex justify-center">
        <el-pagination v-model:current-page="currentPage" :page-size="20" :total="pageTotal" prev-text="上一页"
            next-text="下一页" layout="prev, pager, next,total,jumper" @current-change="handleCurrentChange" />
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
const integralList = ref([
    {integral:10,date:'2021-01-01 10:10:10',serviceNote:'客服备注11',systemNote:'系统备注123123'},
])
//分页相关的数据
const currentPage = ref(1);
const pageTotal = ref(0);
const handleCurrentChange = (val) => {
    console.log(`current page: ${val}`);
    //todo 做分页查询
};
const multipleTableRef = ref()
const multipleSelection = ref([])
const handleSelectionChange = (val) => {
    multipleSelection.value = val
}
</script >
<style lang="less" scoped>
</style>
<style>
/* 表格整体背景色 */
.el-table {
    /* background-color: #666 !important; */
    /* 浅黄色背景 */
}

/* 表头样式 */
.orange-header th {
    background-color: #eee !important;
    /* 橘色背景 */
    color: #777 !important;
    /*文字颜色*/
}

/* 可选：hover效果 */
.el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: #ffefd5 !important;
}
</style>